﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="MessageBox.aspx.cs" Inherits="FrenzDenWebSite.FormMessageBox" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="panelContent" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function RemoveItem(ctlId) {
            //element = document.getElementById(ctlId.parentNode.id);
            ctlId.parentNode.parentNode.removeChild(ctlId.parentNode);
        }
        $(function () {
            $("#txtInput").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "FdService.asmx/GetProfiles",
                        data: "{ 'searchText': '" + document.getElementById('txtInput').value + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: '<img id="imgPid" pid="' + item.ProfileID + '" src="./' + item.ImageUrl + '" style="width:25px;height:25px;"/><span style="padding-left:10px;font-size:14px;">' + item.Name + '</span>',
                                    value: ''
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            //alert(textStatus);
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    document.getElementById('<%=txtMessageTo.ClientID %>').innerHTML += '<div style="background-color:#f5f5f5;font-size:14px;font-weight:bold; width:85%">' + ui.item.label + '<img style="float:right; margin-top:8px;" src="./images/close-icon.png" onclick="RemoveItem(this)" /></div>';
                }
            });
        });

        $(document).ready(function () {
            // Add the page method call as an onclick handler for the div.
            $("#btnSend").click(function () {
                debugger;
                var ele = document.getElementsByTagName("img");
                
                var pids = "";
                for (var i = 0; i < ele.length; i++) {
                    if (ele[i].pid != null) {
                        pids += ele[i].pid + ";";
                    }
                }

                $.ajax({
                    type: "POST",
                    url: "FdService.asmx/SendMessage",
                    data: "{'input':'" + pids + "','message':'" + document.getElementById('<%=txtMessage.ClientID %>').value + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        // Replace the div's content with the page method's return.
                        alert(msg.d);
                    }
                });
            });
        });
    </script>
    <fieldset class="ui-corner-all" style="background-color: White; border: 1px slid black;
        padding: 10px;">
        <table>
            <tr>
                <td style="width: 100px;">
                    Message To:
                </td>
                <td style="width: 20px;">
                </td>
                <td style="width: 200px;">
                    <input id="txtInput" type="text" style="border: 1px solid grey; width: 298px; font-size: 12px;" />
                    <div id="txtMessageTo" runat="server" enableviewstate="true" style="border: 1px solid grey;
                        width: 300px; font-size: 12px; text-align: left;">
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                    Message
                </td>
                <td style="width: 20px;">
                </td>
                <td style="width: 200px;">
                    <asp:TextBox ID="txtMessage" runat="server" Width="290px" Height="70px" TextMode="MultiLine"
                        CssClass="txtcls ui-widget-content ui-corner-all"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                    &nbsp;
                </td>
                <td style="width: 20px;">
                    &nbsp;
                </td>
                <td style="width: 200px;">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td style="width: 100px;">
                    &nbsp;
                </td>
                <td style="width: 20px;">
                    &nbsp;
                </td>
                <td style="width: 200px;">
                    <input id="btnSend" type="button" value="Send" class="btncls" />
                </td>
            </tr>
        </table>
        &nbsp;</fieldset>
</asp:Content>
